<script setup>
import { onMounted, ref } from 'vue'
import gooditem from '@/components/gooditem.vue'
import { getbrand } from '@/api/goodAPI'
import container from '@/components/container.vue'
const brandlist = ref([])
onMounted(async () => {
  const res = await getbrand()
  brandlist.value = res.data.result
})
</script>
<template>
  <container>
    <template #title>热门品牌</template>
    <template #desc>都是热门，都是爆款</template>
    <template #main>
      <ul>
        <li v-for="ele in brandlist" :key="ele.id">
          <gooditem :item="ele"></gooditem>
        </li>
      </ul>
    </template>
  </container>
</template>
<style lang="scss" scoped>
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
  li {
    margin-bottom: 20px;
  }
}
</style>
